<!-- 广告管理 -->
<template>
	<div class="app-container">
		<div v-if="showBlock">
			<!-- 搜索 -->
      <div class="filter-container tw-filter">
        <el-button class="filter-item tw-filter-button" size="medium" icon="el-icon-edit" v-has="$store.state.user.btn_common+'add'" @click="handleAdd()">添加项目</el-button>
      </div>

			<!-- 表格内容展示 -->
			<el-table
        ref="multipleTable"
        :key="tableKey"
        v-loading="listLoading"
        :data="tableList"
        @selection-change="handleSelectionChange"
        border fit highlight-current-row style="width: 100%;"
      >
				<el-table-column type="selection" width="50" />
				<el-table-column label="排序" prop="sort_id" align="center" width="80" v-has="$store.state.user.btn_common+'edit'">
					<template slot-scope="{row}">
						<el-input v-model="row.sort_id" class="edit-input" size="small" @change="updateSort(row.id, row.sort_id)" />
					</template>
				</el-table-column>
				<el-table-column label="项目名称" prop="name" align="left" />
				<el-table-column label="API域名" prop="url" align="left" />
				<el-table-column label="项目简介" prop="desc" align="left" />
				<el-table-column label="API数量" prop="api_count" align="center" />
        <el-table-column label="添加时间" align="center">
        	<template slot-scope="{row}">
        		<span>{{ row.add_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        	</template>
        </el-table-column>

				<el-table-column label="操作" width="240px" align="center" class-name="small-padding fixed-width">
					<template slot-scope="{row}">
						<el-button size="mini" @click="handleClassShow(row.id)">分类管理</el-button>
						<el-button size="mini" v-has="$store.state.user.btn_common+'edit'" @click="handleEdit(row.id)">编辑</el-button>
						<el-button size="mini" v-has="$store.state.user.btn_common+'del'" @click="handleDelete(row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="isPage && listTotal > 0" :total="listTotal" :page.sync="queryList.curpage" :limit.sync="queryList.page" @pagination="getList" />

			<!-- 添加/编辑 -->
			<el-dialog width="40%" @close="resetForm()" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
			  <el-form label-position="right" label-width="120px" ref="dataForm" :rules="rules" :model="form">
					<el-form-item label="项目名称" prop="name" filter="false">
						<el-input v-model="form.name" placeholder="请输入项目名称" />
					</el-form-item>
					<el-form-item label="API域名" prop="url" filter="false">
						<el-input v-model="form.url" placeholder="请输入API域名" />
					</el-form-item>
          <el-form-item label="简介" prop="desc">
            <el-input v-model="form.desc" type="textarea" :rows="5" show-word-limit placeholder="请输入简介" />
          </el-form-item>
					<el-form-item label="排序" prop="sort_id">
						<el-input v-model="form.sort_id" placeholder="请输入排序" filter="false" />
					</el-form-item>
				</el-form>

				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogStatus==='create'?createData():updateData()">保存</el-button>
					<el-button @click="dialogFormVisible = false">取消</el-button>
				</div>
			</el-dialog>
		</div>

		<!-- 分类管理 -->
		<div v-if="showBlock1">
			<!-- 过滤器容器 -->
			<div class="filter-container tw-filter">
				<el-button class="filter-item tw-filter-button" size="medium" icon="el-icon-arrow-left" @click="handleReturn">返回</el-button>
				<el-button class="filter-item tw-filter-button" size="medium" icon="el-icon-edit"v-has="$store.state.user.btn_common+'add'" @click="handleAdd1()">添加分类</el-button>
				<el-button class="filter-item tw-filter-button" size="medium" icon="el-icon-delete" v-has="$store.state.user.btn_common+'del'" @click="handleDelete1()">批量删除</el-button>

				<el-input v-model="queryList1.name" placeholder="请输入分类名称" class="filter-item tw-filter-input" />

				<el-button v-waves class="filter-item tw-filter-button" size="medium" icon="el-icon-search" @click="handleFilter1">搜索</el-button>
			</div>

			<!-- 表格内容展示 -->
			<el-table
        ref="multipleTable"
        :key="tableKey1"
        v-loading="listLoading1"
        :data="tableList1"
        @selection-change="handleSelectionChange1"
        border fit highlight-current-row style="width: 100%;"
      >
				<el-table-column type="selection" width="50" />
				<el-table-column label="排序" prop="sort_id" align="center" width="80" v-has="$store.state.user.btn_common+'edit'">
					<template slot-scope="{row}">
						<el-input v-model="row.sort_id" class="edit-input" size="small" @change="updateSort1(row.id, row.sort_id)" />
					</template>
				</el-table-column>
				<el-table-column label="分类名称" prop="name" align="left" />
        <el-table-column label="分类简介" prop="desc" align="left" />
        <el-table-column label="API数量" prop="api_count" align="center" />
        <el-table-column label="添加时间" align="center">
        	<template slot-scope="{row}">
        		<span>{{ row.add_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        	</template>
        </el-table-column>
				<el-table-column label="操作" width="220" align="center" class-name="small-padding fixed-width">
					<template slot-scope="{row}">
						<el-button size="mini" v-has="$store.state.user.btn_common+'list_item'" @click="handleItemShow(row.id)">API列表</el-button>
						<el-button size="mini" v-has="$store.state.user.btn_common+'edit'" @click="handleEdit1(row.id)">编辑</el-button>
						<el-button size="mini" v-has="$store.state.user.btn_common+'del'" @click="handleDelete1(row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="isPage1 && listTotal1 > queryList1.page" :total="listTotal1" :page.sync="queryList1.curpage" :limit.sync="queryList1.page" @pagination="getList1" />

			<!-- 添加/编辑 -->
			<el-dialog width="40%" @close="resetForm1()" :title="textMap1[dialogStatus1]" :visible.sync="dialogFormVisible1">
			  <el-form label-position="right" label-width="120px" ref="dataForm1" :rules="rules1" :model="form1">
          <el-form-item label="分类名称" prop="name" filter="false">
          	<el-input v-model="form1.name" placeholder="请输入分类名称" />
          </el-form-item>
          <el-form-item label="简介" prop="desc">
            <el-input v-model="form1.desc" type="textarea" :rows="5" show-word-limit placeholder="请输入简介" />
          </el-form-item>
          <el-form-item label="排序" prop="sort_id">
          	<el-input v-model="form1.sort_id" placeholder="请输入排序" filter="false" />
          </el-form-item>
        </el-form>

				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogStatus1==='create'?createData1():updateData1()">保存</el-button>
					<el-button @click="dialogFormVisible1 = false">取消</el-button>
				</div>
			</el-dialog>
		</div>

    <!-- API管理 -->
    <div v-if="showBlock2">
    	<!-- 过滤器容器 -->
    	<div class="filter-container tw-filter">
    		<el-button class="filter-item tw-filter-button" size="medium" icon="el-icon-arrow-left" @click="handleReturn2">返回</el-button>
    		<el-button class="filter-item tw-filter-button" size="medium" icon="el-icon-edit"v-has="$store.state.user.btn_common+'add_item'" @click="handleAdd2()">添加API</el-button>
    		<el-button class="filter-item tw-filter-button" size="medium" icon="el-icon-delete" v-has="$store.state.user.btn_common+'del_item'" @click="handleDelete2()">批量删除</el-button>

    		<el-input v-model="queryList2.name" placeholder="请输入API名称" class="filter-item tw-filter-input" />
        <el-select v-model="queryList2.type" class="filter-item tw-filter-input" placeholder="请选择请求方式" clearable>
        	<el-option key="" label="全部请求方式" value="" />
        	<el-option key="1" label="GET" value="1" />
        	<el-option key="2" label="POST" value="2" />
        </el-select>
        <el-select v-model="queryList2.state" class="filter-item tw-filter-input" placeholder="请选择状态" clearable>
        	<el-option key="" label="全部状态" value="" />
        	<el-option key="1" label="启用" value="1" />
        	<el-option key="0" label="禁用" value="0" />
        </el-select>

    		<el-button v-waves class="filter-item tw-filter-button" size="medium" icon="el-icon-search" @click="handleFilter2">搜索</el-button>
    	</div>

    	<!-- 表格内容展示 -->
    	<el-table
        ref="multipleTable"
        :key="tableKey2"
        v-loading="listLoading2"
        :data="tableList2"
        @selection-change="handleSelectionChange2"
        border fit highlight-current-row style="width: 100%;"
      >
    		<el-table-column type="selection" width="50" />
    		<el-table-column label="排序" prop="sort_id" align="center" width="80" v-has="$store.state.user.btn_common+'edit_item'">
    			<template slot-scope="{row}">
    				<el-input v-model="row.sort_id" class="edit-input" size="small"
    					@change="updateSort2(row.id, row.sort_id)" />
    			</template>
    		</el-table-column>
    		<el-table-column label="API名称" prop="name" align="left" />
        <el-table-column label="请求方式" align="center">
          <template slot-scope="{row}">
            <span v-if="row.type == 2">POST</span>
            <span v-else>GET</span>
          </template>
        </el-table-column>
    		<el-table-column label="URL" prop="url" align="left" />
        <el-table-column label="简介" prop="desc" align="left" />
        <el-table-column label="添加时间" align="center">
        	<template slot-scope="{row}">
        		<span>{{ row.add_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        	</template>
        </el-table-column>
        <el-table-column label="编辑时间" align="center">
        	<template slot-scope="{row}">
        		<span>{{ row.edit_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        	</template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="{row}">
            <span v-if="row.state == 1">启用</span>
            <span v-else>禁用</span>
          </template>
        </el-table-column>
    		<el-table-column label="操作" width="280" align="center" class-name="small-padding fixed-width">
    			<template slot-scope="{row}">
    				<!-- <el-button size="mini" @click="handleTest(row.id)" style="margin-bottom: 10px;">测试</el-button> -->
    				<el-button size="mini" v-has="$store.state.user.btn_common+'edit_item'" @click="handleEdit2(row.id)" style="margin-bottom: 10px;">编辑</el-button>
            <el-button size="mini" v-has="$store.state.user.btn_common+'upshow_item'" v-if="row.state" @click="handleUpshow2(row.id)" style="margin-bottom: 10px;">禁用</el-button>
            <el-button size="mini" v-has="$store.state.user.btn_common+'show_item'" v-else @click="handleShow2(row.id)">启用</el-button>
    				<el-button size="mini" v-has="$store.state.user.btn_common+'add_item'" @click="handleCopy(row.id)">复制</el-button>
    				<el-button size="mini" v-has="$store.state.user.btn_common+'del_item'" @click="handleDelete2(row.id)">删除</el-button>
    			</template>
    		</el-table-column>
    	</el-table>
    	<pagination v-show="isPage2 && listTotal2 > queryList2.page" :total="listTotal2" :page.sync="queryList2.curpage" :limit.sync="queryList2.page" @pagination="getItemList" />

    	<!-- 添加/编辑 -->
    	<el-dialog width="45%" @close="resetForm2()" :title="textMap2[dialogStatus2]" :visible.sync="dialogFormVisible2">
    	  <el-form label-position="right" label-width="120px" ref="dataForm2" :rules="rules2" :model="form2">
          <el-form-item label="API名称" prop="name" filter="false">
          	<el-input v-model="form2.name" placeholder="请输入API名称" />
          </el-form-item>
          <el-form-item label="URL" prop="url" filter="false">
          	<el-input v-model="form2.url" placeholder="请输入URL" />
          </el-form-item>
          <el-form-item label="请求方式" prop="type">
            <el-radio-group v-model="form2.type">
              <el-radio :label="1">GET</el-radio>
              <el-radio :label="2">POST</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="简介" prop="desc">
            <el-input v-model="form2.desc" type="textarea" :rows="5" show-word-limit placeholder="请输入简介" />
          </el-form-item>

          <!-- 请求头 -->
          <el-form-item label="请求头" filter="false">
            <i class="el-icon-circle-plus" @click="addRowHeader()" style="font-size: 25px;color: #409EFF;"></i>
          </el-form-item>
          <div style="padding-left: 120px;margin-bottom: 10px;">
            <el-table ref="multipleTable" key="10" :data="form2.header" border style="width: 100%;">
            	<el-table-column label="字段名称" prop="name" align="center" width="180">
            		<template slot-scope="scope">
            			<el-input v-model="scope.row.name" class="edit-input" size="small" />
            		</template>
            	</el-table-column>
              <el-table-column label="值类型" prop="type" align="center" width="110">
              	<template slot-scope="scope">
              		<el-input v-model="scope.row.type" class="edit-input" size="small" />
              	</template>
              </el-table-column>
              <el-table-column label="备注" prop="remarks" align="center" width="290">
              	<template slot-scope="scope">
              		<el-input v-model="scope.row.remarks" class="edit-input" size="small" />
              	</template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="90">
              	<template slot-scope="scope">
                  <i class="el-icon-circle-plus" @click="addRowHeader(scope.$index+1)" style="font-size: 25px;color: #409EFF;"></i>
                  <i class="el-icon-remove-outline" @click="delRowHeader(scope.$index)" style="font-size: 25px;margin-left: 5px;"></i>
              	</template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 参数 -->
          <el-form-item label="参数" filter="false">
            <i class="el-icon-circle-plus" @click="addRowParam()" style="font-size: 25px;color: #409EFF;"></i>
          </el-form-item>
          <div style="padding-left: 120px;margin-bottom: 10px;">
            <el-table ref="multipleTable" key="11" :data="form2.param" border style="width: 100%;">
            	<el-table-column label="字段名称" prop="name" align="center" width="180">
            		<template slot-scope="scope">
            			<el-input v-model="scope.row.name" class="edit-input" size="small" />
            		</template>
            	</el-table-column>
              <el-table-column label="值类型" prop="type" align="center" width="110">
              	<template slot-scope="scope">
              		<el-input v-model="scope.row.type" class="edit-input" size="small" />
              	</template>
              </el-table-column>
              <el-table-column label="备注" prop="remarks" align="center" width="290">
              	<template slot-scope="scope">
              		<el-input v-model="scope.row.remarks" class="edit-input" size="small" />
              	</template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="90">
              	<template slot-scope="scope">
                  <i class="el-icon-circle-plus" @click="addRowParam(scope.$index+1)" style="font-size: 25px;color: #409EFF;"></i>
                  <i class="el-icon-remove-outline" @click="delRowParam(scope.$index)" style="font-size: 25px;margin-left: 5px;"></i>
              	</template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 返回值 -->
          <el-form-item label="返回值" filter="false">
            <i class="el-icon-circle-plus" @click="addRowParamReturn()" style="font-size: 25px;color: #409EFF;"></i>
          </el-form-item>
          <div style="padding-left: 120px;margin-bottom: 10px;">
            <el-table ref="multipleTable" key="11" :data="form2.datas" border style="width: 100%;">
            	<el-table-column label="字段名称" prop="name" align="center" width="180">
            		<template slot-scope="scope">
            			<el-input v-model="scope.row.name" class="edit-input" size="small" />
            		</template>
            	</el-table-column>
              <el-table-column label="值类型" prop="type" align="center" width="110">
              	<template slot-scope="scope">
              		<el-input v-model="scope.row.type" class="edit-input" size="small" />
              	</template>
              </el-table-column>
              <el-table-column label="备注" prop="remarks" align="center" width="290">
              	<template slot-scope="scope">
              		<el-input v-model="scope.row.remarks" class="edit-input" size="small" />
              	</template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="90">
              	<template slot-scope="scope">
                  <i class="el-icon-circle-plus" @click="addRowParamReturn(scope.$index+1)" style="font-size: 25px;color: #409EFF;"></i>
                  <i class="el-icon-remove-outline" @click="delRowParamReturn(scope.$index)" style="font-size: 25px;margin-left: 5px;"></i>
              	</template>
              </el-table-column>
            </el-table>
          </div>

          <el-form-item label="相关图片">
            <UploadAll v-on:uploadCallBack="uploadCallBackAll($event, 'image_album')" :fileList="form2.image_album_arr" :maxLimit="10" :formData="{dir_type:'api'}" tip="支持格式gif,jpg,png等"></UploadAll>
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group v-model="form2.state">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="排序" prop="sort_id">
          	<el-input v-model="form2.sort_id" placeholder="请输入排序" filter="false" />
          </el-form-item>
        </el-form>

    		<div slot="footer" class="dialog-footer">
    			<el-button @click="dialogStatus2==='create'?createData2():updateData2()">保存</el-button>
    			<el-button @click="dialogFormVisible2 = false">取消</el-button>
    		</div>
    	</el-dialog>
    </div>


    <!-- 测试 -->
    <el-dialog title="测试" :visible.sync="dialogFormVisibleShare" width="45%">
      <el-form label-position="right" label-width="120px" ref="dataForm3" :model="apiDetail">
        <el-form-item label="API名称" prop="name" filter="false">
          <el-input v-model="apiDetail.name" placeholder="请输入API名称" />
        </el-form-item>
        <el-form-item label="URL" prop="url" filter="false">
          <el-input v-model="apiDetail.url" placeholder="请输入URL" />
        </el-form-item>
        <el-form-item label="请求方式" prop="type">
          <el-radio-group v-model="apiDetail.type">
            <el-radio :label="1">GET</el-radio>
            <el-radio :label="2">POST</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="简介" prop="desc">
          <el-input v-model="apiDetail.desc" type="textarea" :rows="5" show-word-limit placeholder="请输入简介" />
        </el-form-item>

        <!-- 请求头 -->
        <el-form-item label="请求头" filter="false">
          <el-button class="filter-item tw-filter-button" size="medium" type="primary" @click="handleTestApi">测试</el-button>
        </el-form-item>
        <div style="padding-left: 80px;margin-bottom: 10px;">
          <el-table ref="multipleTable" key="10" :data="apiDetail.header" border style="width: 100%;">
            <el-table-column label="字段名称" prop="name" align="center" width="180">
              <template slot-scope="scope">
                <el-input v-model="scope.row.name" class="edit-input" size="small" />
              </template>
            </el-table-column>
            <el-table-column label="值类型" prop="type" align="center" width="110">
              <template slot-scope="scope">
                <el-input v-model="scope.row.type" class="edit-input" size="small" />
              </template>
            </el-table-column>
            <el-table-column label="备注" prop="remarks" align="center" width="290">
              <template slot-scope="scope">
                <el-input v-model="scope.row.remarks" class="edit-input" size="small" />
              </template>
            </el-table-column>
            <el-table-column label="测试值" align="center" width="130">
              <template slot-scope="scope">
                <el-input v-model="scope.row.value" class="edit-input" size="small" />
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 参数 -->
        <el-form-item label="参数" filter="false"></el-form-item>
        <div style="padding-left: 80px;margin-bottom: 10px;">
          <el-table ref="multipleTable" key="11" :data="apiDetail.param" border style="width: 100%;">
            <el-table-column label="字段名称" prop="name" align="center" width="180">
              <template slot-scope="scope">
                <el-input v-model="scope.row.name" class="edit-input" size="small" />
              </template>
            </el-table-column>
            <el-table-column label="值类型" prop="type" align="center" width="110">
              <template slot-scope="scope">
                <el-input v-model="scope.row.type" class="edit-input" size="small" />
              </template>
            </el-table-column>
            <el-table-column label="备注" prop="remarks" align="center" width="290">
              <template slot-scope="scope">
                <el-input v-model="scope.row.remarks" class="edit-input" size="small" />
              </template>
            </el-table-column>
            <el-table-column label="测试值" align="center" width="130">
              <template slot-scope="scope">
                <el-input v-model="scope.row.value" class="edit-input" size="small" />
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 返回值 -->
        <el-form-item label="返回值" filter="false"> </el-form-item>
        <div style="padding-left: 80px;margin-bottom: 10px;">
          <el-table ref="multipleTable" key="11" :data="apiDetail.datas" border style="width: 100%;">
            <el-table-column label="字段名称" prop="name" align="center" width="180">
              <template slot-scope="scope">
                <el-input v-model="scope.row.name" class="edit-input" size="small" />
              </template>
            </el-table-column>
            <el-table-column label="值类型" prop="type" align="center" width="110">
              <template slot-scope="scope">
                <el-input v-model="scope.row.type" class="edit-input" size="small" />
              </template>
            </el-table-column>
            <el-table-column label="备注" prop="remarks" align="center" width="290">
              <template slot-scope="scope">
                <el-input v-model="scope.row.remarks" class="edit-input" size="small" />
              </template>
            </el-table-column>
            <el-table-column label="测试值" align="center" width="130">
              <template slot-scope="scope">
                <el-input v-model="scope.row.value" class="edit-input" size="small" />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleShare = false">关闭</el-button>
      </div>
    </el-dialog>

	</div>
</template>

<script>
	import Pagination from '@/components/Pagination' // 基于el分页的二次封装
	import waves from '@/directive/waves' // waves directive
  import UploadAll from '@/components/Upload/UploadAll'

	export default {
		components: { Pagination,UploadAll },
		directives: { waves },
		data() {
			return {
        // 数据列表
        listLoading: true,
        tableKey: 0,
        listTotal: 0,
        isPage: false,
        tableList: [],
        multipleSelection: [],//多选数据
        // 添加/编辑弹窗
        dialogFormVisible: false,
        dialogStatus: '',
        textMap: {
        	update: '编辑',
        	create: '添加'
        },
        //键字段
        keyName: 'id',
        apiPath: 'guide.apiclass',

				// 搜索数据
				queryList: {
					page: this.$store.state.settings.page, // 每页显示数量
					curpage: 1, // 当前页码
          parent_id: 0, //上级ID
				},

				// 表单数据
				form: {
					id: 0, //ID
					name: '', // 项目名称
					url: '', //API域名
          parent_id: 0, //上级ID
					desc: '', //简介
					sort_id: 255 // 排序
				},
				// 重置数据
				formReset: {
					id: 0, //ID
					name: '', // 项目名称
					url: '', //API域名
          parent_id: 0, //上级ID
					desc: '', //简介
					sort_id: 255 // 排序
				},
				// 验证
				rules: {
					name: [{ required: true, message: '请输入项目名称！', trigger: 'change' }],
					url: [{ required: true, message: '请输入API域名！', trigger: 'change' }],
				},

        //显示控制
        showBlock: true,
        showBlock1: false,
        showBlock2: false,
        relevanceID: 'parent_id', //关联ID
        parent_id: '', //父表ID-项目ID

        /*分类*/
        // 数据列表
        listLoading1: true,
        tableKey1: 1,
        listTotal1: 0,
        isPage1: false,
        tableList1: [],
        multipleSelection1: [],//多选数据
        // 添加/编辑弹窗
        dialogFormVisible1: false,
        dialogStatus1: '',
        textMap1: {
        	update: '编辑',
        	create: '添加'
        },

        // 搜索数据
        queryList1: {
        	page: this.$store.state.settings.page, // 每页显示数量
        	curpage: 1, // 当前页码
          parent_id: 0, //上级ID
        	name: '', //分类名称
        },
        // 表单数据
        form1: {
        	id: 0, //ID
          parent_id: 0, //上级ID
        	name: '', // 分类名称
        	desc: '', //简介
        	sort_id: 255 // 排序
        },
        // 重置数据
        formReset1: {
        	id: 0, //ID
        	parent_id: 0, //上级ID
        	name: '', // 分类名称
        	desc: '', //简介
        	sort_id: 255 // 排序
        },
        // 验证
        rules1: {
        	name: [{ required: true, message: '请输入分类名称！', trigger: 'change' }],
        },

        /*API*/
        // 数据列表
        listLoading2: true,
        tableKey2: 2,
        listTotal2: 0,
        isPage2: false,
        tableList2: [],
        multipleSelection2: [],//多选数据
        // 添加/编辑弹窗
        dialogFormVisible2: false,
        dialogStatus2: '',
        textMap2: {
        	update: '编辑',
        	create: '添加'
        },
        //键字段
        keyName2: 'id',
        apiPath2: 'guide.api',
        relevanceID2: 'ac_id', //关联ID
        ac_id: '', //父表ID-分类ID


        // 搜索数据
        queryList2: {
        	page: this.$store.state.settings.page, // 每页显示数量
        	curpage: 1, // 当前页码
          ac_parent_id: 0, //项目ID
          ac_id: 0, //分类ID
        	name: '', //API名称
          type: null, //请求方式
          state: null, //状态
        },
        // 表单数据
        form2: {
          id: 0,
          ac_parent_id: 0, //项目ID
        	ac_id: 0, //分类ID
        	name: '', // API名称
        	url: '', //URL
        	type: 1, //请求方式
        	desc: '', //简介
        	header: [{
            name: 'apiKey',
            type: 'str *',
            remarks: '应用账号',
          },{
            name: 'timeStamp',
            type: 'str *',
            remarks: '请求时间戳',
          },{
            name: 'sign',
            type: 'str *',
            remarks: '签名',
          },{
            name: 'token',
            type: 'str *',
            remarks: '用户Token',
          }], //请求头
        	param: [{
            name: 'page',
            type: 'int *',
            remarks: '每页显示条数',
          },{
            name: 'curpage',
            type: 'int *',
            remarks: '当前页码',
          }], //参数
        	datas: [{
            name: 'code',
            type: 'int',
            remarks: '200为正常',
          },{
            name: 'hasmore',
            type: 'bool',
            remarks: '是否有下一页 true/false',
          },{
            name: 'datas',
            type: 'array',
            remarks: '数据',
          },{
            name: '├ error',
            type: 'str',
            remarks: '错误提示，正常不返回',
          }], //返回值
        	image_album: '', //字段图片
          image_album_arr: [],
          state: 1,
        	sort_id: 255 // 排序
        },
        // 重置数据
        formReset2: {
        	id: 0,
        	ac_parent_id: 0, //项目ID
        	ac_id: 0, //分类ID
        	name: '', // API名称
        	url: '', //URL
        	type: 1, //请求方式
        	desc: '', //简介
        	header: [{
        	  name: 'apiKey',
        	  type: 'str *',
        	  remarks: '应用账号',
        	},{
        	  name: 'timeStamp',
        	  type: 'str *',
        	  remarks: '请求时间戳',
        	},{
        	  name: 'sign',
        	  type: 'str *',
        	  remarks: '签名',
        	},{
        	  name: 'token',
        	  type: 'str *',
        	  remarks: '用户Token',
        	}],  //请求头
        	param: [{
        	  name: 'page',
        	  type: 'int *',
        	  remarks: '每页显示条数',
        	},{
        	  name: 'curpage',
        	  type: 'int *',
        	  remarks: '当前页码',
        	}], //参数
        	datas: [{
        	  name: 'code',
        	  type: 'int',
        	  remarks: '200为正常',
        	},{
        	  name: 'hasmore',
        	  type: 'bool',
        	  remarks: '是否有下一页 true/false',
        	},{
        	  name: 'datas',
        	  type: 'array',
        	  remarks: '数据',
        	},{
        	  name: '├ error',
        	  type: 'str',
        	  remarks: '错误提示，正常不返回',
        	}], //返回值
        	image_album: '', //字段图片
        	image_album_arr: [],
        	state: 1,
        	sort_id: 255 // 排序
        },
        // 验证
        rules2: {
        	name: [{ required: true, message: '请输入API名称！', trigger: 'change' }],
        	url: [{ required: true, message: '请输入URL！', trigger: 'change' }],
        	type: [{ required: true, message: '请选择请求方式！', trigger: 'change' }],
        },

        //详情
        dialogFormVisibleShare: false,
        //详情信息
        apiDetail: {},
			}
		},
		created() {
			//获取项目-列表
			this.getList()
		},

		methods: {
/*******************************公共方法******************************/
      // 搜索
      handleFilter() {
      	this.queryList.curpage = 1
      	this.tableList = []
        this.listTotal = 0
      	this.getList()
      },
      // 列表选择
      handleSelectionChange(val) {
      	this.multipleSelection = val
      },
      // 重置form
      resetForm() {
      	this.form = JSON.parse(JSON.stringify(this.formReset))
      },
			// 获取数据列表
			getList() {
				this.listLoading = true
				this.$api.fetchList(this.queryList, this.apiPath).then(response => {
					this.tableList = response.list
					this.listTotal = response.list_count
					this.isPage = response.is_page
          this.listLoading = false
				})
			},
			// 添加
			handleAdd() {
			  this.resetForm()
			  this.dialogStatus = 'create'
			  this.dialogFormVisible = true
			  this.$nextTick(() => {
			    this.$refs['dataForm'].clearValidate()
			  })
			},
			// 编辑
			handleEdit(id = 0) {
			  this.resetForm()
			  // 获取详情
			  this.$api.getDetail({ id: id }, this.apiPath).then(response => {
          //response.detail.ident = parseInt(response.detail.ident);
          //数据处理
          for(let key in this.form){
            if(response.detail.hasOwnProperty(key)){
              this.form[key] = response.detail[key]
            }
          }
			  })
			  this.dialogStatus = 'update'
			  this.dialogFormVisible = true
			  this.$nextTick(() => {
			    this.$refs['dataForm'].clearValidate();
			  })
			},
      // 添加-数据提交
      createData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$api.add(this.form, this.apiPath).then(() => {
              // 重新获取列表
              this.queryList.curpage = 1
              this.tableList = []
              this.getList()

              this.dialogFormVisible = false
              this.$message({
                message: '添加成功',
                type: 'success'
              })
            })
          }
        })
      },
      // 编辑-数据提交
      updateData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$api.edit(this.form, this.apiPath).then(response => {
              // 重新获取列表
              this.getList()

              this.dialogFormVisible = false
              this.$message({
                message: '编辑成功',
                type: 'success'
              })
            })
          }
        })
      },
      // 删除
      handleDelete(id = 0) {
        let current = this
        let id_str = ''
        if (!id) {
          // 多选
          if (!this.multipleSelection.length) {
            this.$message({
              message: '请选择删除的条目！',
              type: 'warning'
            })
            return false
          }
          // 数据处理
          this.multipleSelection.forEach(item => {
            id_str += item[current.keyName] + ','
          })
        } else {
          id_str = id
        }

        // 提交数据
        this.$confirm('确认删除数据吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.del({ id_str: id_str }, this.apiPath).then(response => {
            // 重新获取列表
            this.getList()
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          })
        })
      },
			// 排序
			updateSort(id = 0, sort = '') {
				this.$api.editSort({
					id: id,
					sort: sort
				}, this.apiPath).then(response => {
					this.$message({
						message: '排序成功',
						type: 'success'
					})
				})
			},
/*******************************公共方法END******************************/

      /*分类管理*/
      //点击管理分类
      handleClassShow(id=0) {
        this.queryList1[this.relevanceID] = id;
        this[this.relevanceID] = id;
        this.showBlock = false;
        this.showBlock1 = true;
        this.showBlock2 = false;
        //获取分类列表
        this.getList1();
      },
      //点击返回广告位
      handleReturn() {
        this[this.relevanceID] = 0;
        this.queryList1[this.relevanceID] = 0;
        this.showBlock = true;
        this.showBlock1 = false;
        this.showBlock2 = false;
      },
/*******************************公共方法1******************************/
      // 搜索
      handleFilter1() {
      	this.queryList1.curpage = 1
      	this.tableList1 = []
        this.listTotal1 = 0
      	this.getList1()
      },
      // 列表选择
      handleSelectionChange1(val) {
      	this.multipleSelection1 = val
      },
      // 重置form
      resetForm1() {
      	this.form1 = JSON.parse(JSON.stringify(this.formReset1))
      },
			// 获取数据列表
			getList1() {
				this.listLoading1 = true
				this.$api.fetchList(this.queryList1, this.apiPath).then(response => {
					this.tableList1 = response.list
					this.listTotal1 = response.list_count
					this.isPage1 = response.is_page
          this.listLoading1 = false
				})
			},
			// 添加
			handleAdd1() {
			  this.resetForm1()
			  this.dialogStatus1 = 'create'
			  this.dialogFormVisible1 = true
			  this.$nextTick(() => {
			    this.$refs['dataForm1'].clearValidate()
			  })
			},
			// 编辑
			handleEdit1(id = 0) {
			  this.resetForm1()
			  // 获取详情
			  this.$api.getDetail({ id: id }, this.apiPath).then(response => {
          //数据处理
          for(let key in this.form1){
            if(response.detail.hasOwnProperty(key)){
              this.form1[key] = response.detail[key]
            }
          }
			  })
			  this.dialogStatus1 = 'update'
			  this.dialogFormVisible1 = true
			  this.$nextTick(() => {
			    this.$refs['dataForm1'].clearValidate();
			  })
			},
      // 添加-数据提交
      createData1() {
        this.$refs['dataForm1'].validate((valid) => {
          if (valid) {
            this.form1[this.relevanceID] = this[this.relevanceID]
            this.$api.add(this.form1, this.apiPath).then(() => {
              // 重新获取列表
              this.queryList1.curpage = 1
              this.tableList1 = []
              this.getList1()

              this.dialogFormVisible1 = false
              this.$message({
                message: '添加成功',
                type: 'success'
              })
            })
          }
        })
      },
      // 编辑-数据提交
      updateData1() {
        this.$refs['dataForm1'].validate((valid) => {
          if (valid) {
            this.form1[this.relevanceID] = this[this.relevanceID]
            this.$api.edit(this.form1, this.apiPath).then(response => {
              // 重新获取列表
              this.getList1()

              this.dialogFormVisible1 = false
              this.$message({
                message: '编辑成功',
                type: 'success'
              })
            })
          }
        })
      },
      // 删除
      handleDelete1(id = 0) {
        let current = this
        let id_str = ''
        if (!id) {
          // 多选
          if (!this.multipleSelection1.length) {
            this.$message({
              message: '请选择删除的条目！',
              type: 'warning'
            })
            return false
          }
          // 数据处理
          this.multipleSelection1.forEach(item => {
            id_str += item[current.keyName] + ','
          })
        } else {
          id_str = id
        }

        // 提交数据
        this.$confirm('确认删除数据吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.del({ id_str: id_str }, this.apiPath).then(response => {
            // 重新获取列表
            this.getList1()
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          })
        })
      },
			// 排序
			updateSort1(id = 0, sort = '') {
				this.$api.editSort({
					id: id,
					sort: sort
				}, this.apiPath).then(response => {
					this.$message({
						message: '排序成功',
						type: 'success'
					})
				})
			},
/*******************************公共方法1END******************************/


      /*API管理*/
      //点击管理API
      handleItemShow(id=0) {
        this.queryList2.ac_parent_id = this[this.relevanceID2];
        this.queryList2[this.relevanceID2] = id;
        this[this.relevanceID2] = id;
        this.showBlock = false;
        this.showBlock1 = false;
        this.showBlock2 = true;
        //获取API列表
        this.getItemList();
      },
      //点击返回广告位
      handleReturn2() {
        this[this.relevanceID2] = 0;
        this.queryList2.ac_parent_id = 0;
        this.queryList2[this.relevanceID2] = 0;
        this.showBlock = false;
        this.showBlock1 = true;
        this.showBlock2 = false;
      },
      //文件上传回调
      uploadCallBackAll(res, fieldName=''){
        if(fieldName){
          this.form2[fieldName] = res.fileName;
        }else{
          this.$message('图片字段错误！');
        }
      },

      // 搜索
      handleFilter2() {
      	this.queryList2.curpage = 1
      	this.tableList2 = []
        this.listTotal2 = 0
      	this.getItemList()
      },
      // 列表选择
      handleSelectionChange2(val) {
      	this.multipleSelection2 = val
      },
      // 重置form
      resetForm2() {
      	this.form2 = JSON.parse(JSON.stringify(this.formReset2))
      },
      //获取API列表
      getItemList() {
      	this.listLoading2 = true
      	this.$api.fetchList(this.queryList2, this.apiPath2).then(response => {
      		this.tableList2 = response.list
      		this.listTotal2 = response.list_count
      		this.isPage2 = response.is_page
          this.listLoading2 = false
      	})
      },
      // 添加
      handleAdd2() {
      	this.resetForm2()
      	this.dialogStatus2 = 'create'
      	this.dialogFormVisible2 = true
      	this.$nextTick(() => {
      		this.$refs['dataForm2'].clearValidate()
      	})
      },
      // 编辑
      handleEdit2(id = 0) {
      	this.resetForm2()
      	// 获取详情
      	this.$api.getDetail({ id: id }, this.apiPath2).then(response => {
          //数据处理
          for(let key in this.form2){
            if(response.detail.hasOwnProperty(key)){
              this.form2[key] = response.detail[key]
            }
          }
      	})

      	this.dialogStatus2 = 'update'
      	this.dialogFormVisible2 = true
      	this.$nextTick(() => {
      		this.$refs['dataForm2'].clearValidate()
      	})
      },
      // 添加-数据提交
      createData2() {
      	this.$refs['dataForm2'].validate((valid) => {
      		if (valid) {
            this.form2.header_str = JSON.stringify(this.form2.header)
            this.form2.param_str = JSON.stringify(this.form2.param)
            this.form2.param_return_str = JSON.stringify(this.form2.datas)
            this.form2.ac_parent_id = this[this.relevanceID]
            this.form2[this.relevanceID2] = this[this.relevanceID2]
      			this.$api.add(this.form2, this.apiPath2).then(() => {
      				// 重新获取列表
      				this.queryList2.curpage = 1
      				this.tableList2 = []
      				// 重新获取列表
      				this.getItemList();

      				this.dialogFormVisible2 = false
      				this.$message({
      					message: '添加成功',
      					type: 'success'
      				})
      			})
      		}
      	})
      },
      // 编辑-数据提交
      updateData2() {
      	this.$refs['dataForm2'].validate((valid) => {
      		if (valid) {
            this.form2.header_str = JSON.stringify(this.form2.header)
            this.form2.param_str = JSON.stringify(this.form2.param)
            this.form2.param_return_str = JSON.stringify(this.form2.datas)
      			this.$api.edit(this.form2, this.apiPath2).then(() => {
      				// 重新获列表
      				this.getItemList();

      				this.dialogFormVisible2 = false
      				this.$message({
      					message: '编辑成功',
      					type: 'success'
      				})
      			})
      		}
      	})
      },
      // 删除
      handleDelete2(id = 0) {
        let current = this
        let id_str = ''
        if (!id) {
          // 多选
          if (!this.multipleSelection2.length) {
            this.$message({
              message: '请选择删除的条目！',
              type: 'warning'
            })
            return false
          }
          // 数据处理
          this.multipleSelection2.forEach(item => {
            id_str += item[current.keyName2] + ','
          })
        } else {
          id_str = id
        }

        // 提交数据
        this.$confirm('确认删除数据吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.del({ id_str: id_str }, this.apiPath2).then(response => {
            // 重新获取列表
            this.getItemList()
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          })
        })
      },
      // 排序
      updateSort2(id = 0, sort = '') {
      	this.$api.editSort({
      		id: id,
      		sort: sort
      	}, this.apiPath2).then(response => {
          // 重新获取列表
          //this.getItemList()
      		this.$message({
      			message: '排序成功',
      			type: 'success'
      		})
      	})
      },
      //启用
      handleShow2(id = 0) {
      	this.$confirm('确认启用数据吗?', '提示', {
      		confirmButtonText: '确定',
      		cancelButtonText: '取消',
      		type: 'warning'
      	}).then(() => {
      		this.$api.show({ id_str: id }, this.apiPath2).then(response => {
      			// 重新获取列表
      			this.getItemList()
      			this.$message({
      				message: '启用成功',
      				type: 'success'
      			})
      		})
      	})
      },
      //禁用
      handleUpshow2(id = 0) {
      	this.$confirm('确认禁用数据吗?', '提示', {
      		confirmButtonText: '确定',
      		cancelButtonText: '取消',
      		type: 'warning'
      	}).then(() => {
      		this.$api.upshow({ id_str: id }, this.apiPath2).then(response => {
      			// 重新获取列表
      			this.getItemList()
      			this.$message({
      				message: '禁用成功',
      				type: 'success'
      			})
      		})
      	})
      },

      //复制
      handleCopy(id = 0) {
      	this.$confirm('确认复制数据吗?', '提示', {
      		confirmButtonText: '确定',
      		cancelButtonText: '取消',
      		type: 'warning'
      	}).then(() => {
      		this.$api.otherPost({ id: id }, this.apiPath2+'/copy').then(response => {
      			// 重新获取列表
      			this.getItemList()
      			this.$message({
      				message: '复制成功',
      				type: 'success'
      			})
      		})
      	})
      },

      /*API添加-请求头增减*/
      //增
      addRowHeader(index = 0) {
        if(index){
          this.form2.header.splice(index, 0, {
            name: '',
            type: '',
            remarks: '',
          });
        }else{
          this.form2.header.push({
            name: '',
            type: '',
            remarks: '',
          });
        }
      },
      //减
      delRowHeader(index=-1) {
        if(index >= 0){
          this.form2.header.splice(index, 1);
        }
      },
      /*API添加-参数增减*/
      //增
      addRowParam(index = 0) {
        if(index){
          this.form2.param.splice(index, 0, {
            name: '',
            type: '',
            remarks: '',
          });
        }else{
          this.form2.param.push({
            name: '',
            type: '',
            remarks: '',
          });
        }
      },
      //减
      delRowParam(index=-1) {
        if(index >= 0){
          this.form2.param.splice(index, 1);
        }
      },
      /*API添加-返回值增减*/
      //增
      addRowParamReturn(index = 0) {
        if(index){
          this.form2.datas.splice(index, 0, {
            name: '',
            type: '',
            remarks: '',
          });
        }else{
          this.form2.datas.push({
            name: '',
            type: '',
            remarks: '',
          });
        }
      },
      //减
      delRowParamReturn(index=-1) {
        if(index >= 0){
          this.form2.datas.splice(index, 1);
        }
      },

      //测试
      handleTest(id = 0){
        this.apiDetail = {}
        // 获取详情
        this.$api.getDetail({ id: id }, this.apiPath2).then(response => {
          this.apiDetail = response.detail
        })
        this.dialogFormVisibleShare = true
      },
      handleTestApi(){

      }
		}
	}
</script>
